<template>
    <div class="app-container">
      <div class="search-box">
        
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="60">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        
        <el-table-column label="接口">
          <template slot-scope="scope">
            {{ scope.row.path }}
          </template>
        </el-table-column>
        
        <el-table-column class-name="status-col" label="请求时间"  align="center">
          <template slot-scope="scope">
            {{ scope.row.request_time }}
          </template>
        </el-table-column>

        <el-table-column label="请求IP">
            <template slot-scope="scope">
              {{ scope.row.request_ip }}
            </template>
          </el-table-column>
        
        <el-table-column label="请求方法">
          <template slot-scope="scope">
            {{ scope.row.method }}
          </template>
        </el-table-column>

        <el-table-column label="请求参数">
            <template slot-scope="scope">
              {{ scope.row.params }}
            </template>
          </el-table-column>

        <el-table-column label="用户">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>

          <el-table-column label="耗时">
            <template slot-scope="scope">
              {{ scope.row.cost_time }} 毫秒
            </template>
          </el-table-column>
        
        
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    
      </div>
  </template>
  
  <script>
  import { getOperationList } from '@/api/operation'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  export default {
    components: { Pagination },
    filters: {
      
    },
    data() {
      return {
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      
      getList() {
        this.listLoading = true
        getOperationList(this.listQuery).then(response => {
          this.list = response.data.list
          this.total = response.data.total
          this.listLoading = false
        }).catch(err=>{
          console.log(err)
          this.listLoading = false
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .search-box{
    padding-bottom: 10px;
  }
  </style>